<template>
  <div class>
    <crumbs attribute1="权限管理" attribute2="角色列表"></crumbs>

    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom:20px;" @click="dialogVisible = true">添加用户</el-button>
      <el-table :data="tablist" stripe border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- <pre>{{scope.row}}</pre> -->
            <div v-if="scope.row.children.length>0">
              <el-row class="elstyle" v-for="item1 in scope.row.children" :key="item1.id">
                <!-- 第一列 -->
                <el-col :span="4">
                  <el-tag
                   closable
                    @close="Delete(scope.row,scope.row.id,item1.id)"
                    type="primary"
                  >{{item1.authName}}</el-tag>
                </el-col>
                <!-- 第二列 -->
                <el-col :span="20">
                  <el-row v-for="item2 in item1.children" :key="item2.id">
                    <el-col :span="8">
                      <el-tag
                        @close="Delete(scope.row,scope.row.id,item2.id)"
                        closable
                        type="success"
                      >{{item2.authName}}</el-tag>
                    </el-col>
                    <el-col :span="16">
                      <el-tag
                        @close="Delete(scope.row,scope.row.id,item3.id)"
                        closable
                        type="warning"
                        v-for="item3 in item2.children"
                        :key="item3.id"
                      >{{item3.authName}}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <div v-else>此用户暂时没有权限</div>
          </template>
        </el-table-column>

        <el-table-column label="#" width="80" type="index"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column prop="level" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="exit(scope.row)">编辑</el-button>
            <el-button
             size="mini"
              type="primary"
              style="backgroundColor:#f56c6c;border:none"
              @click="del(scope.row.id)"
              icon="el-icon-delete"
            >删除</el-button>
            <el-button
             size="mini"
              type="primary"
              style="backgroundColor:#e6a23c;border:none"
              icon="el-icon-setting"
              @click="fenpei(scope.row)"
            >分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- //添加用户 -->
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Addlist('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" :visible.sync="dialogVisibles" width="30%">
      <el-form :model="ruleForms" :rules="rulen" ref="ruleForms" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForms.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForms.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="exitok('ruleForms')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配权限 -->
    <el-dialog title="提示" :visible.sync="flag" width="30%">
      <el-tree
        ref="rightsTreeRef"
        :data="data"
        node-key="id"
        show-checkbox
        default-expand-all
        :default-checked-keys="checkedArr"
        :props="defaultProps"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="setAuthor()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRole,
  getRoleData,
  setExitData,
  DeleteData,
  getAuthorList,
  setAuthors,
  DeleteAuthData
} from "@/http/api";
export default {
  created() {
    this.getData();
    this.getAUth();
  },

  data() {
    return {
      flag: false,
      dialogVisibles: false,
      defaultProps: {
        children: "children",
        label: "authName"
      },
      ruleForms: {
        roleName: "",
        roleDesc: ""
      },
      rulen: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户名称输入范围在5~20个字符之间",
            trigger: "blur"
          }
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "角色描述输入范围在5~20个字符之间",
            trigger: "blur"
          }
        ]
      },
      ruleForm: {
        roleName: "",
        roleDesc: ""
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户名称输入范围在5~20个字符之间",
            trigger: "blur"
          }
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "角色描述输入范围在5~20个字符之间",
            trigger: "blur"
          }
        ]
      },
      dialogVisible: false,
      tablist: [],
      exitid: 0,
      data: [],
      //树形默认选中的权限id组成的数组
      checkedArr: [],
      rowid: ""
    };
  },
  mounted() {},
  methods: {
    //删除用户权限
    Delete(row,id, rid) {
      
      DeleteAuthData({ id: id, rid: rid }).then(res => {
        row.children = res
      });
    },
    //点击确定分配权限
    setAuthor() {
      this.flag = false;
      //获取半选节点的id
      let halfcheck = this.$refs.rightsTreeRef.getHalfCheckedKeys();

      //获取全选节点id
      let allcheck = this.$refs.rightsTreeRef.getCheckedKeys();

      //合并全选数组和半选数组
      let contentArr = [...halfcheck, ...allcheck];
      console.log(contentArr);

      //将合并后的数组根据接口要求用，分割为字符串
      let datastrig = contentArr.join(",");

      setAuthors({ id: this.rowid, rids: datastrig }).then(res => {
        this.getData();
      });
    },
    //分配用户权限
    fenpei(row) {
      this.flag = true;
      //获取行上id
      this.rowid = row.id;
      //先清除上次默认选中的checkedArr
      this.checkedArr = [];

      //调用递归方法
      this.getCurrentId(row, this.checkedArr);
    },
    //实现用递归获取当前角色所拥有的权限id
    getCurrentId(row, arr) {
      //先判断row有没有child
      if (!row.children) {
        return arr.push(row.id);
      }

      row.children.forEach(item => {
        this.getCurrentId(item, arr);
      });
    },
    getAUth() {
      getAuthorList("tree").then(res => {
        console.log(res);
        this.data = res;
      });
    },
    //删除角色
    del(id) {
      console.log(id);

      this.id = id;
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let res = DeleteData(this.id);
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //编辑完成
    exitok(ruleForms) {
      this.dialogVisibles = false;
      this.$refs[ruleForms].validate(bool => {
        if (!bool) return;
        setExitData({
          id: this.exitid,
          roleName: this.ruleForms.roleName,
          roleDesc: this.ruleForms.roleDesc
        }).then(res => {
          this.getData();
        });
      });
    },
    //编辑数据
    exit(scope) {
      this.dialogVisibles = true;
      this.exitid = scope.id;
      this.ruleForms.roleName = scope.roleName;
      this.ruleForms.roleDesc = scope.roleDesc;
    },
    //添加数据
    Addlist(ruleForm) {
      this.dialogVisible = false;
      this.$refs[ruleForm].validate(bool => {
        if (!bool) return;
        getRoleData(this.ruleForm).then(res => {
          this.getData();
        });
      });
    },
    getData() {
      getRole().then(res => {
        console.log(res);
        this.tablist = res;
      });
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin: 15px 0;
  width: 100%;
}
.el-tag {
  margin: 10px;
}
.elstyle {
  //   margin-left: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
